<template>
  <div class="page-classify">
    <div class="page-classify-container">
      <div class="breadcrumb-box">
        <a class="breadcrumb-item" @click="clearQuery">{{kl_md.KLCGBG == 1 ? '全部课题' : '全部课程'}}</a>
        <span class="breadcrumb-arrow">
          <van-icon name="arrow" size="16" color="#999" />
        </span>
        <template v-if="type">
          <a
            class="breadcrumb-item"
            @click="handleChangeMajor({ id: 'all' })"
            >{{
              type == 1
                ? $t("locale.pc.classify.t2")
                : type == 2
                ? $t("locale.pc.classify.t3")
                : type == 3
                ? $t("locale.pc.classify.t4")
                : ""
            }}</a
          >
          <span class="breadcrumb-arrow">
            <van-icon name="arrow" size="16" color="#999" />
          </span>
        </template>
        <template v-if="major && Object.keys(current_major).length > 0">
          <a class="breadcrumb-item">{{ current_major.name }}</a>
          <span class="breadcrumb-arrow">
            <van-icon name="arrow" size="16" color="#999" />
          </span>
        </template>
      </div>
      <div class="classify-box">
        <dl class="classify-menu">
          <dt>{{ $t("locale.pc.classify.t5") }}</dt>
          <!-- <dd>
            <a @click="handleChangeMajor({ id: 'all' })">全部</a>
          </dd> -->
          <dd v-for="(item, index) in major_rec_list" :key="index">
            <a @click="handleChangeMajor(item)" :class="['menu-nav',$route.query.id == item.id?'active':'',!$route.query.id && item.id == 'all'?'active':'']" >{{ item.name }}</a>
          </dd>
        </dl>
      </div>
      <div class="major-classify-core">
        <course-card
          v-for="(item, index) in course_list"
          :key="index"
          :detail="item"
        ></course-card>
      </div>
      <div class="pagination" v-if="course_list.length > 0">
        <Page
          :total="total"
          :current="page"
          :page-size="pageSize"
          show-elevator
          @on-change="handleChangePage"
        ></Page>
        <!-- <van-pagination
          v-model="page"
          :total-items="total"
          :show-page-size="9"
          force-ellipses
        /> -->
      </div>
      <div class="no-data" v-if="course_list.length == 0">
        <Icon type="ios-information-circle" />
        <div class="none-text">
          {{ $t("locale.pc.classify.t6") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCourse, getCourseByMajor,getMajorTreeCourse } from "~/api/course";
import { getMajorList } from "~/api/major";
import { mapState, mapActions, mapMutations } from "vuex";
import CourseCard from "~/components/pc/CourseCard.vue";
export default {
  components: {
    CourseCard
  },
  data() {
    return {
      page: 1,
      pageSize: 12,
      total: 0,
      major: "",
      classify_type: "",
      course_list: [], //课程列表
      major_rec_list: [], //推荐专业
      current_major: {} //当前专业
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      theme_color(state) {
        return state.theme_color;
      },
      major_list(state) {
        return state.major_list;
      },
      course_record_list(state) {
        return state.course_record_list;
      },
      kl_md(state){
        return state.kl_md;
      }
    }),
    major_id() {
      return this.$route.query.id;
    },
    type() {
      /*
        1、热门
        2、直播
        3、免费
      */
      return this.$route.query.type;
    }
  },
  watch: {
    major_id(new_val, old_val) {
      this.reloadPage();
    }
  },
  methods: {
    ...mapActions([]),
    ...mapMutations(["SET_IS_LOADING"]),
    async getMajorData() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 10,
        sort: "videoSort desc",
        isRec: 1
      };
      let result = await getMajorList(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.major_rec_list = [
          {
            name: this.$t("locale.pc.classify.t7"),
            id: "all",
            is_actived: true
          },
          ...result.data.data.rows
            .filter(i => i.isRec == 1)
            .map((i, x) => {
              return { ...i, is_actived: false };
            })
        ];
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(
          this.$t("locale.pc.binding.t8") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async getMajorObject() {
      this.SET_IS_LOADING(true);
      let params = {};
      if (this.major) {
        params = {
          ...params,
          id: Number(this.major)
        };
      }
      let result = await getMajorList(params);
      console.log("专业对象：", result.data.data.rows[0]);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.current_major = result.data.data.rows[0];
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(
          this.$t("locale.pc.binding.t8") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async getData(other_params) {
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        sort: "sortIndex desc",
        // isRec: 1,
        isUse: 1,
        ...other_params
      };
      if (this.classify_type == 1) {
        params = {
          ...params
        };
      }
      if (this.classify_type == 2) {
        params = {
          ...params,
          isLive: 1
        };
      }
      if (this.classify_type == 3) {
        params = {
          ...params,
          isFree: 1
        };
      }
      let result = {};
      if (this.major) {
        params = {
          ...params,
          majorId: this.major
        };
        result = await getMajorTreeCourse(params);
      }else{
        params = {
          ...params,
          isRec: 1,
        };
        result = await getCourseByMajor(params);
      }
      // let result = await getCourseByMajor(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        // this.course_list = result.data.data.rows;
        // 加一层折扣时间的判断,不在折扣时间内判定为不是折扣课程
        this.course_list = result.data.data.rows.map(item=>{
          let currentTime = new Date().getTime();
          if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
            return {
              ...item,
              isDiscount:0
            };
          }else{
            return item;
          }
        })
        this.total = result.data.data.total;
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    toPath(path) {
      const { redirectUrl } = path;
      if (redirectUrl) {
        this.$router.push({
          path
        });
      }
    },
    handleChangeMajor(item) {
      let route = {
        path: "",
        query: {
          id: item.id
        }
      };
      if (item.id == "all") {
        route = {
          path: ""
        };
      }
      if (this.type) {
        route = {
          ...route,
          query: {
            ...route.query,
            type: this.type
          }
        };
      }
      this.$router.push(route);
      this.major = item.id == "all" ? "" : item.id;
      this.page = 1;
      // this.getMajorObject();
      // this.getData();
    },
    initPage() {
      this.major = this.major_id;
      this.classify_type = this.type;
      this.getData();
      this.getMajorData();
      this.getMajorObject();
    },
    reloadPage() {
      this.major = this.major_id;
      this.classify_type = this.type;
      this.getData();
      this.getMajorObject();
    },
    clearQuery() {
      this.$router.push({
        query: ""
      });
      this.major = undefined;
      this.classify_type = undefined;
      this.page = 1;
      this.total = 0;
      this.getData();
    },
    handleChangePage(page) {
      this.page = page;
      this.getData();
    }
  },
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-classify {
  // margin-bottom: 55px;
  padding-bottom: 55px;
  min-height: calc(100vh - 427px);
  .page-classify-container {
    margin: auto;
    max-width: 1200px;
    .breadcrumb-box {
      padding: 34px 0;
      border-bottom: 1px solid #e5e5e5;
      font-size: 14px;
      color: #333;
      vertical-align: middle;
      .breadcrumb-item {
        float: left;
      }
      .breadcrumb-arrow {
        float: left;
        vertical-align: middle;
        margin: 0 5px;
      }
      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }
    .classify-box {
      border-bottom: 1px solid #e5e5e5;
      .classify-menu {
        position: relative;
        padding-left: 95px;
        > dt {
          position: absolute;
          left: 0;
          padding: 20px 0 0 0;
          font-size: 14px;
          color: #949494;
        }
        > dd {
          float: left;
          > a {
            display: inline-block;
            height: 100%;
            padding: 20px 19px;
            color: #333;
            font-size: 14px;
            text-decoration: none;
            &:hover {
              color: var(--theme-color);
              text-decoration: none;
            }
          }
          >a.active{
            color: var(--theme-color);
          }
        }
        &:after {
          content: "";
          display: block;
          clear: both;
        }
      }
    }
    .major-classify-core {
      margin-top: 25px;
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
<style lang="scss" scoped>
.page-classify {
  .pagination {
    margin: 25px auto 0;
    width: 660px;
    .van-pagination {
      font-size: 18px;
    }
    .ivu-page {
      text-align: center;
    }
  }
  .no-data {
    text-align: center;
    margin-top: 50px;
    > i {
      font-size: 80px;
      color: var(--theme-color);
    }
    .none-text {
      margin: 15px 0;
      font-size: 16px;
      color: #666;
      text-align: center;
    }
  }
}
</style>
